<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '卡密管理',
  },
}
</route>

<template>
  <!-- 导航栏 -->
  <customHeader title="卡密管理"></customHeader>

  <!-- 卡密管理 -->
  <view
    class="kamil bg-white color-base font-size-24rpx position-relative flex-1 px-32rpx pb-100rpx"
  >
    <!-- 请选择收货地址 -->
    <view>
      <view
        v-for="(ares, index) in state.kamilData"
        :key="index"
        class="kamilList flex mt-22rpx position-relative"
      >
        <!-- 背景图片 -->
        <image
          class="w-684rpx h-188rpx block pos-absolute left-0 top-0"
          :src="staticUrl('/static/identity/jamibg.png')"
        ></image>

        <!-- 主体 -->
        <view class="z-9 w-full pos-relative flex justify-between items-center">
          <!-- 信息 -->
          <view class="kamil_List_left">
            <view class="flex items-center mb-28rpx mt-28rpx">
              <view class="kamil_title">卡密券</view>
              <view class="color-base font-bold font-size-32rpx mx-14rpx">ASDW22345678</view>
              <image
                @click="copyText('ASDW22345678')"
                class="w-21rpx h-21rpx block"
                :src="staticUrl('/static/identity/jamicy.png')"
              ></image>
            </view>

            <view class="" v-if="ares.default">
              <view class="mb-4rpx">使用人姓名：张小飞</view>
              <view>使用人手机号：17726570000</view>
            </view>
          </view>
          <!-- 状态 -->
          <view class="kamil_List_right flex items-center font-bold font-size-30rpx">待使中</view>
        </view>
      </view>
    </view>

    <!-- 页脚 -->
    <view class="font-size-24rpx color-tip">
      <view class="color-context font-size-24rpx font-bold mt-100rpx mb-10rpx">卡密说明</view>
      1、此卡密用于推广员注册使用，推广员注册使用时使用此卡密 可以免审核直接完成认证审核。
      <br />
      2、推广员使用此卡密完成认证后，后续推广员产生收益，您这 边会获得对应分成。
    </view>
  </view>

  <!-- 缺省页 -->
  <customExpect
    v-if="state.kamilData.length === 0"
    style="flex: 1"
    :title="'您还没有卡密'"
    :icon="'/static/default/comingShop.png'"
  ></customExpect>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { useMessage, useToast } from 'wot-design-uni'

const toast = useToast()

// reactive声明响应式数据，用于声明引用数据类型
const state = reactive({
  kamilData: [
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: true,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: true,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: true,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: true,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
  ],
})

// onMounted
onMounted(() => {
  console.log('onMounted')
})

// 跳转新增地址
const toAddLocation = (query) => {
  uni.navigateTo({
    url: `addLocation?query=${JSON.stringify(query)}`,
  })
}

// 设置默认地址
const toChangeActive = (data) => {
  state.kamilData.forEach((value) => {
    value.default = false
  })
  data.default = true
}

// 复制文本
const copyText = (data) => {
  uni.setClipboardData({ data })
}
</script>

<style lang="scss">
.kamil {
  .kamilList {
    width: 684rpx;
    height: 188rpx;
    .kamil_List_left {
      flex: 1;
      height: 188rpx;
      padding: 0rpx 0rpx 0rpx 26rpx;
      .kamil_title {
        width: 92rpx;
        height: 36rpx;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 36rpx;
        color: #06853f;
        text-align: center;
        border: 2rpx solid #06853f;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
    }
    .kamil_List_right {
      width: 78rpx;
      line-height: 78rpx;
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
  }
}
</style>
